www.gusucode.com > 超多HTML5 制作页面Loading加载的小动画图标集源码程序 > 超多HTML5 制作页面Loading加载的小动画图标集/箭头加载H5非常炫酷的加载特效loading/箭头加载H5非常炫酷的加载特效loading/css/spinner/heartbeat.css
@-moz-keyframes heartbeat-loader { 0% { -moz-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @-webkit-keyframes heartbeat-loader { 0% { -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @keyframes heartbeat-loader { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } /* :not(:required) hides this rule from IE9 and below */ .heartbeat-loader:not(:required) { -moz-animation: heartbeat-loader 1300ms ease 0s infinite normal; -webkit-animation: heartbeat-loader 1300ms ease 0s infinite normal; animation: heartbeat-loader 1300ms ease 0s infinite normal; display: inline-block; position: relative; overflow: hidden; text-indent: -9999px; width: 36px; height: 36px; -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .heartbeat-loader:not(:required):after, .heartbeat-loader:not(:required):before { position: absolute; content: ""; background: #e87; } .heartbeat-loader:not(:required):before { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; top: 12px; left: 0; width: 36px; height: 24px; } .heartbeat-loader:not(:required):after { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; top: 0; left: 12px; width: 24px; height: 12px; }